<template>
	<view class="contentPage">
		<navigation-custom :config="config" :scrollTop="scrollTop" @customConduct="customConduct"
			:scrollMaxHeight="scrollMaxHeight"></navigation-custom>
		<!-- 顶部信息 -->
		<div class="baogaoInfo">
			<div>
				<image src="../../static/img/icon_lesson.png" mode="widthFix"></image>
				{{name}}
			</div>
			<div>
				<div>
					<image src="../../static/img/icon_done.png" mode="widthFix"></image>
					<p>已完/未完：</p>
					<p>{{yiwan}}/{{xueyuannum - yiwan}}</p>
				</div>
				<div>
					<image src="../../static/img/icon_time.png" mode="widthFix"></image>
					<p>班均耗时：</p>
					<p>{{junhaoshi || 0}}</p>
				</div>
				<div>
					<image src="../../static/img/icon_rate.png" mode="widthFix"></image>
					<p>班均正确率：</p>
					<p>{{junok}}％</p>
				</div>
			</div>
		</div>
		<!-- 列表信息 -->
		<div class="baogaoList">
			<div v-for="(item,index) in list" :key="index"
				:style="{'background-image':item.accuracy !=0 && (item.question_correct_count != 0 || item.question_count - item.question_correct_count != 0) ? 'url(https://api-tms-test.reallyedu.com/img/baogao-bg-l.png)' : 'url(https://api-tms-test.reallyedu.com/img/baogao-bg-h.png)'}">
				<!-- <div :class="item.type == 2 ? 'baogaoStatusW':''"></div> -->
				<div>
					<div>
						<image
							:src="item.gender == 1 ? '../../static/img/icon_boy.png' : '../../static/img/icon_girl.png'"
							mode="widthFix"></image>
						<p>{{item.name}}</p>
					</div>
					<div>
						<p>正确</p>
						<p>{{item.question_correct_count}}</p>
					</div>
					<div>
						<p>错误</p>
						<p>{{item.question_count - item.question_correct_count}}</p>
					</div>
					<div>
						<p>正确率</p>
						<p>{{item.accuracy * 100}}%</p>
					</div>
					<div>
						<p>耗时</p>
						<p>{{item.elapsed_time}}</p>
					</div>
				</div>
				<div class="baogaoListIdx flex">
					<!-- <div class="list_child"> -->
					<!-- <div class="list_child_child flex"> -->
					{{item.accuracy !=0 && (item.question_correct_count != 0 || item.question_count - item.question_correct_count != 0) ? (index * 1 + 1):''}}
					<image
						v-if="item.accuracy == 0 && item.question_correct_count == 0 && item.question_count - item.question_correct_count == 0"
						src="../../static/img/icon_pencil.png" mode="widthFix"></image>
					<!-- </div> -->
					<!-- </div> -->
				</div>
				<div class="baogaoStatus flex"
					:class="item.accuracy !=0 && (item.question_correct_count != 0 || item.question_count - item.question_correct_count != 0) ?'':'baogaoStatusW'">
					{{item.accuracy !=0 && (item.question_correct_count != 0 || item.question_count - item.question_correct_count != 0) ? '已完成' : '未完成'}}
				</div>
			</div>
		</div>
		<div class="loadingmove">
			{{loadingtext?'没有更多了':'加载中'}}
			<image v-if="!loadingtext" class="liadingimg" src="../../static/img/loading.gif" mode="widthFix">
			</image>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				loadingtext: 0,
				clazz_id: 0,
				curriculum_no: 0,
				baogaook: 0,
				baogaono: 0,
				junhaoshi: 0,
				junok: 0,
				allok: 0,
				allti: 0,
				name: "",
				xueyuannum: 0,
				yiwan: 0,

				config: {
					title: "首页", //title
					bgcolor: "linear-gradient(to bottom, #91bdcf,#bde1f0)", //背景颜色
					fontcolor: "#000000", //文字颜色，默认白色
					type: 1, //type 1，3胶囊 2，4无胶囊模式
					transparent: false, //是否背景透明 默认白色
					linear: false, //是为开启下滑渐变
					share: false, //是否将主页按钮显示为分享按钮
					// menuIcon:"../static/img/back.png", 当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
					// menuText:"返回", 当type为3或4的时候icon右边的文字
				},
				scrollTop: 0, // 当linear为true的时候需要通过onpagescroll传递参数
				scrollMaxHeight: 200, //滑动的高度限制，超过这个高度即背景全部显示
				contentTop: "", //自定义导航的高度
			};
		},
		onLoad(e) {
			this.clazz_id = e.id;
			this.curriculum_no = e.kc;
			this.name = e.name;
			this.xueyuannum = e.xueyuannum;
			this.yiwan = e.yiwan;
			this.baogaodetail();
			this.config.title = this.name;
			var that = this;
			uni.$on('height', function(data) {
				that.contentTop = data.msg;
			})
		},
		methods: {
			// 班级-班级详情-课表列表
			async baogaodetail() {
				try {
					const res = await this.$api.getbaogaodetail({
						clazz_id: this.clazz_id,
						curriculum_no: this.curriculum_no,
					});
					this.list = res.data;
					for (let i in this.list) {
						this.junhaoshi += this.list[i].elapsed_time;
						this.allok += this.list[i].question_correct_count;
						this.allti += this.list[i].question_count;
						// this.allok += this.list[i].accuracy;
						this.list[i].elapsed_time = this.$gj_api.s_to_hs(this.list[i].elapsed_time);
						if (this.list[i].accuracy == 1) {
							this.baogaook += 1;
						} else {
							this.baogaono += 1;
						}
					}
					console.log(this.baogaook)
					this.junhaoshi = this.$gj_api.s_to_hs(parseInt(this.junhaoshi / this.baogaook));
					// this.junok = this.allok ? parseInt(this.allok / this.list.length * 100) : 0;
					this.junok = this.allok ? parseInt(this.allok / this.allti * 100) : 0;
				} catch (e) {
					console.log(e)
				}
			},
		},
		onReachBottom() {
			setTimeout(() => {
				if (!this.loadingtext) {
					this.page = this.page += 1;
				}
			}, 500)
		},
	}
</script>

<style lang="scss">
	@import './workBaogaoDetail.scss'
</style>
